{% load i18n static common %}
<div style="padding: 10px;height: 485px;width: 740px">
    <form class="layui-form action-form" action method="post" id="{{ model_name }}_{{ action_repr }}">
        {% csrf_token %}
        <div class="layui-upload">
          <button type="button" class="layui-btn" id="idUpload">Upload</button>
          <div class="layui-hide layui-progress" lay-showpercent="true">
            <div class="layui-progress-bar" lay-percent="20%"></div>
          </div>
          <blockquote class="layui-elem-quote layui-quote-nm" style="height:360px;width:720px;margin-top: 10px;border-width: 1px;overflow-y: scroll">
            <div class="layui-upload-list" id="idReview"></div>
         </blockquote>
        </div>
        <div class="layui-form-item">
          {% layui_inline form.form.overwrite %}
          {% layui_inline form.form.ignore_error %}
        </div>
    </form>

</div>
<script>
    var removePhoto = function(pin){
        var parent=document.getElementById("idReview");
        var child=document.getElementById("pin"+pin);
        if (child != null){
            parent.removeChild(child);
        }
    };
    layui.use('upload', function () {
        var upload = layui.upload;
        upload.render({
        elem: '#idUpload'
        ,url: ''
        ,field: 'bio_photo'
        ,auto: false
        ,exts: "jpg"
        ,multiple: true
        ,choose: function(obj){
          obj.preview(function(index, file, result){
            var pin = file.name.split('.')[0];
            var parent=document.getElementById("idReview");
            var child=document.getElementById("pin"+pin);
            if (child != null){
                parent.removeChild(child);
            }
            $('#idReview').append('<div id="pin'+pin+'" style="float:left;width: 84px;"><div style="width:84px;height:84px;"><img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width:80px;height:80px;"/></div><div style="width: 84px;padding: 0 0 3px 0;"><a style="color:#E84C3D;" href="javascript:void(0); onclick="removePhoto('+pin+')"><i class="fa fa-fw fa-trash-o"></i></a><span style="width: 65px;text-overflow: ellipsis;">'+ file.name +'</span></div></div>')
          });
        }
        ,done: function(res){
        }
      });
    });
</script>